<template>
  <div class="min-h-screen bg-gray-50 flex items-center justify-center p-4">

    <div class="w-full max-w-3xl bg-white rounded-2xl p-8 shadow-sm">
      <h1 class="text-3xl font-semibold text-gray-900 mb-4">Online requirement form</h1>

      <p class="text-gray-600 mb-8">
        Please fill out the following form to submit your requirements. Our team will review your request and get back
        to you with a tailored solution as soon as possible. Providing detailed information helps us better understand
        your needs and offer the most suitable services for you.
      </p>

      <form @submit.prevent="handleSubmit" class="space-y-6">
        <!-- Requirements Dropdown -->
        <div>
          <label class="block text-gray-700 mb-2">
            What's your requirements? <span class="text-red-500">*</span>
          </label>
          <div class="relative">
            <select v-model="formData.requirement"
              class="w-full px-4 py-2.5 bg-white border border-gray-300 rounded-md appearance-none focus:outline-none focus:ring-2 focus:ring-gray-200 focus:border-transparent"
              required>
              <option value="" disabled selected>Select requirement</option>
              <option v-for="option in requirementOptions" :key="option.value" :value="option.value">
                {{ option.label }}
              </option>
            </select>
            <div class="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
              <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
              </svg>
            </div>
          </div>
        </div>

        <!-- Name Fields -->
        <div>
          <label class="block text-gray-700 mb-2">
            Your name <span class="text-red-500">*</span>
          </label>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <input v-model="formData.firstName" type="text" placeholder="First Name"
              class="w-full px-4 py-2.5 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-200 focus:border-transparent"
              required />
            <input v-model="formData.lastName" type="text" placeholder="Last Name"
              class="w-full px-4 py-2.5 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-200 focus:border-transparent"
              required />
          </div>
        </div>

        <!-- Contact Fields -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label class="block text-gray-700 mb-2">
              Phone number
            </label>
            <input v-model="formData.phone" type="tel" placeholder="Enter your phone number"
              class="w-full px-4 py-2.5 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-200 focus:border-transparent" />
          </div>
          <div>
            <label class="block text-gray-700 mb-2">
              Email address <span class="text-red-500">*</span>
            </label>
            <input v-model="formData.email" type="email" placeholder="Enter your email address"
              class="w-full px-4 py-2.5 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-200 focus:border-transparent"
              required />
          </div>
        </div>

        <!-- Description Field -->
        <div>
          <label class="block text-gray-700 mb-2">
            Description <span class="text-red-500">*</span>
          </label>
          <textarea v-model="formData.description" rows="6" placeholder="Describe your requirement..."
            class="w-full px-4 py-2.5 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-200 focus:border-transparent resize-none"
            required></textarea>
        </div>

        <!-- Submit Button -->
        <div class="flex justify-end">
          <button type="submit"
            class="px-6 py-2.5 bg-gray-800 text-white rounded-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors">
            Submit
          </button>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const requirementOptions = [
  { value: 'consulting', label: 'Consulting Services' },
  { value: 'development', label: 'Development Work' },
  { value: 'design', label: 'Design Services' },
  { value: 'support', label: 'Technical Support' },
  { value: 'other', label: 'Other' }
]

const formData = ref({
  requirement: '',
  firstName: '',
  lastName: '',
  phone: '',
  email: '',
  description: ''
})

const handleSubmit = () => {
  // Handle form submission here
  console.log('Form submitted:', formData.value)
  // Reset form after submission
  formData.value = {
    requirement: '',
    firstName: '',
    lastName: '',
    phone: '',
    email: '',
    description: ''
  }
}
</script>